<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/muiReset.css" />
		<link rel="stylesheet" type="text/css" href="css/mainStyle.css" />
		<style>
			html,
			body {
				background-color: white;
			}
			
			.headPic {
				height: 210px;
				padding: 30px 0;
				background: url(img/45w58PIC7j6_1024.jpg) no-repeat;
				background-size: cover;
			}
			
			.headPic img {
				display: block;
				width: 120px;
				height: 120px;
				border-radius: 60px;
				margin: 0 auto;
			}
			
			.headPic .userName {
				line-height: 40px;
				text-align: center;
			}
			
			.mui-table-view {
				border-bottom: 1px solid #c8c7cc;
				border-top: 1px solid #c8c7cc;
			}
			
			.mui-grid-view.mui-grid-9 {
				border-top: 1px solid #c8c7cc;
				border-bottom: 1px solid #c8c7cc;
				margin: 10px 0;
			}
			
			.mui-table-view-cell:after {
				position: absolute;
				right: 0;
				bottom: 0;
				left: 0;
				height: 1px;
				content: '';
				-webkit-transform: scaleY(1);
				transform: scaleY(1);
				background-color: #c8c7cc;
			}
			
			#yhq,
			#jf {
				float: right;
				margin-right: 20px;
				font-size: 14px;
				color: darkgray;
				margin-top: 2px;
			}
			
			.mui-table-view-cell-last-m10 {
				margin-top: 10px;
				border-top: 1px solid #c8c7cc;
			}
			
			.mb50 {
				margin-bottom: 50px;
			}
			
			.bt1 {
				border-top: 1px solid #c8c7cc;
			}
			.top44 {
				top: 44px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon iconfont icon-shezhi mui-pull-left" id="setting"></a>
			<a class="mui-icon iconfont icon-youjian mui-pull-right" id="NewsCenter"><span class="mui-badge mui-badge-red">100</span></a>
		</header>
		<div class="mui-content user_content">
			<div class="mui-scroll-wrapper top44">
				<div class="mui-scroll">
					<div class="headPic">
						<a id="userInfo"><img src="img/lbxx.jpg" /></a>
						<p class="userName">蜡笔小新</p>
					</div>
					<ul class="mui-table-view mb50">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right">
								<span class="mui-tab-label">我的订单</span>
							</a>
						</li>
						<ul class="mui-table-view mui-grid-view mui-grid-9">
							<li class="mui-table-view-cell mui-media width-20">
								<a href="#">
									<span class="mui-icon iconfont icon-daifukuan"><span class="mui-badge mui-badge-red">11</span></span>
									<div class="mui-media-body">待付款</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media width-20">
								<a href="#">
									<span class="mui-icon iconfont icon-daifahuo"><span class="mui-badge mui-badge-red">11</span></span>
									<div class="mui-media-body">待发货</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media width-20">
								<a href="#">
									<span class="mui-icon iconfont icon-icon-daishouhuo"><span class="mui-badge mui-badge-red">11</span></span>
									<div class="mui-media-body">待收货</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media width-20">
								<a href="#">
									<span class="mui-icon iconfont icon-daipingjia"><span class="mui-badge mui-badge-red">11</span></span>
									<div class="mui-media-body">待评价</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media width-20">
								<a href="#">
									<span class="mui-icon iconfont icon-shouhou"><span class="mui-badge mui-badge-red">11</span></span>
									<div class="mui-media-body">售后订单</div>
								</a>
							</li>
						</ul>
						<li class="mui-table-view-cell bt1">
							<a class="mui-navigate-right"><span class="mui-icon iconfont icon-pingjia"></span>
								<span class="mui-tab-label">我的评价</span>
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right"><span class="mui-icon iconfont icon-huishouzhan"></span>
								<span class="mui-tab-label">订单回收站</span>
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right"><span class="mui-icon iconfont icon-shoucang"></span>
								<span class="mui-tab-label">我的收藏</span>
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right"><span class="mui-icon iconfont icon-youhuiquan"></span>
								<span class="mui-tab-label">优惠券</span>
								<span id="yhq">您有2张优惠券可用</span>
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right"><span class="mui-icon iconfont icon-jifen"></span>
								<span class="mui-tab-label">我的积分</span>
								<span id="jf">可用积分673</span>
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right"><span class="mui-icon iconfont icon-zuji"></span>
								<span class="mui-tab-label">我的足迹</span>
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right"><span class="mui-icon iconfont icon-fuwuhao"></span>
								<span class="mui-tab-label">关注服务号</span>
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right"><span class="mui-icon iconfont icon-kefu"></span>
								<span class="mui-tab-label">在线客服</span>
							</a>
						</li>
						<li class="mui-table-view-cell mui-table-view-cell-last-m10">
							<a class="mui-navigate-right"><span class="mui-icon iconfont icon-fankui"></span>
								<span class="mui-tab-label">帮助于反馈</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		</style>
	</body>
	<script src="js/mui.min.js"></script>
	<script src="js/zepto_1.1.3.js" type="text/javascript" charset="utf-8"></script>
	<script>
		mui('.mui-scroll-wrapper').scroll({
			deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
		});
		mui.init({
			swipeBack: true, //启用右滑关闭功能
			preloadPages: [{
				url: "userInfo.html",
				id: "userInfo.html",
				subpages: ["uerInfo.html", "setting.html", "NewsCenter.html"] //预加载页面的子页面
			}],
			preloadLimit: 5 //预加载窗口数量限制(一旦超出,先进先出)默认不限制
		});

		// 打开新页面
		$('a').on('tap', function() {
			var id = $(this).attr("id");
			if(id != '') {
				var Html = id + ".html";
				mui.openWindow({
					url: Html,
					id: Html,
					show: {
						autoShow: true, //页面loaded事件发生后自动显示，默认为true
						aniShow: 'pop-in', //页面显示动画，默认为”slide-in-right“；
						event: 'titleUpdate', //页面显示时机，默认为titleUpdate事件时显示
					},
					waiting: {
						autoShow: true, //自动显示等待框，默认为true
						title: '正在加载...' //等待对话框上显示的提示内容
					}
				})
			} else {
				alert('暂未链接')
			}
		})
	</script>

</html>